<template>
    <div class="copyright-registration">
      <ServiceNav />
      
      <!-- Banner区域 -->
      <div class="banner">
        <div class="banner-content container">
          <h1 class="banner-title">软件著作权登记</h1>
          <p class="banner-desc">官方认证渠道，为您的软件作品提供法律保护</p>
          <div class="banner-actions">
            <el-button type="primary" size="large" @click="handleRegister">立即申请</el-button>
            <el-button class="btn-details" size="large" @click="handleLearnMore">了解详情</el-button>
          </div>
        </div>
      </div>
      
      <!-- 服务选项 -->
      <div class="service-options">
        <div class="container">
          <h2 class="section-title">申请时限与价格</h2>
          <div class="options-grid">
            <div class="option-card" v-for="(option, index) in serviceOptions" :key="index">
              <h3 class="option-title">{{ option.title }}</h3>
              <div class="option-price">{{ option.price }}元/件</div>
              <div class="option-time">{{ option.time }}</div>
              <el-button type="primary" @click="selectOption(option)">立即购买</el-button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 软著价值 -->
      <div class="value-section">
        <div class="container">
          <h2 class="section-title">软件著作权的价值</h2>
          <div class="value-grid">
            <div class="value-item" v-for="(value, index) in copyrightValues" :key="index">
              <div class="value-icon">
                <el-icon :size="48"><component :is="value.icon" /></el-icon>
              </div>
              <h3 class="value-title">{{ value.title }}</h3>
              <p class="value-desc">{{ value.description }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 核心优势 -->
      <div class="advantages">
        <div class="container">
          <h2 class="section-title">核心优势 <span class="subtitle">打造网络生态系统</span></h2>
          <div class="advantages-grid">
            <div class="advantage-item" v-for="(advantage, index) in coreAdvantages" :key="index">
              <div class="advantage-icon">
                <el-icon :size="48"><component :is="advantage.icon" /></el-icon>
              </div>
              <h3 class="advantage-title">{{ advantage.title }}</h3>
              <p class="advantage-desc">{{ advantage.description }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 申请流程 -->
      <div class="process">
        <div class="container">
          <h2 class="section-title">流程清晰 <span class="subtitle">1对1跟踪服务</span></h2>
          <el-steps :active="1" finish-status="success" align-center>
            <el-step v-for="(step, index) in applicationProcess" :key="index" :title="step.title" :description="step.description"></el-step>
          </el-steps>
        </div>
      </div>
      
      <!-- 申请材料 -->
      <div class="materials">
        <div class="container">
          <h2 class="section-title">申请材料</h2>
          <el-tabs type="border-card">
            <el-tab-pane label="企业申请材料">
              <ul class="material-list">
                <li v-for="(material, index) in enterpriseMaterials" :key="index">
                  {{ material }}
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="个人申请材料">
              <ul class="material-list">
                <li v-for="(material, index) in personalMaterials" :key="index">
                  {{ material }}
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      
      <!-- 申请表单 -->
      <div class="application-form" id="application-form">
        <div class="container">
          <h2 class="section-title">立即申请</h2>
          <el-form :model="form" label-width="120px" class="registration-form">
            <el-form-item label="申请类型">
              <el-radio-group v-model="form.applicantType">
                <el-radio label="enterprise">企业申请</el-radio>
                <el-radio label="personal">个人申请</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item label="软件名称">
              <el-input v-model="form.softwareName" placeholder="请输入软件名称"></el-input>
            </el-form-item>
            
            <el-form-item label="联系人姓名">
              <el-input v-model="form.contactName" placeholder="请输入联系人姓名"></el-input>
            </el-form-item>
            
            <el-form-item label="联系电话">
              <el-input v-model="form.contactPhone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            
            <el-form-item label="电子邮箱">
              <el-input v-model="form.email" placeholder="请输入电子邮箱"></el-input>
            </el-form-item>
            
            <el-form-item label="申请时限">
              <el-select v-model="form.timeLimit" placeholder="请选择申请时限">
                <el-option 
                  v-for="option in serviceOptions" 
                  :key="option.id" 
                  :label="option.title" 
                  :value="option.id">
                </el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item label="上传资料">
              <el-upload
                class="upload-demo"
                drag
                action="/api/upload"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-exceed="handleExceed"
              >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <template #tip>
                  <div class="el-upload__tip">
                    请上传身份证、营业执照等申请必备资料，支持jpg/png/pdf格式
                  </div>
                </template>
              </el-upload>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="submitApplication">提交申请</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      
      <!-- 常见问题 -->
      <div class="faq-section">
        <div class="container">
          <h2 class="section-title">常见问题</h2>
          
          <el-collapse accordion>
            <el-collapse-item v-for="(faq, index) in faqs" :key="index" :title="faq.question" :name="index">
              <div>{{ faq.answer }}</div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      
      <Footer />
    </div>
  </template>
  
  <script>
  import { defineComponent, ref, reactive } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { 
    UploadFilled, 
    Trophy, 
    Money, 
    Lock, 
    Document, 
    Star, 
    Connection, 
    Check, 
    Timer, 
    CircleCheck,
    CreditCard,
    Select,
    Setting
  } from '@element-plus/icons-vue';
  import ServiceNav from '@/components/ServiceNav.vue';
  import Footer from '@/components/Footer.vue';
  
  export default defineComponent({
    name: 'CopyrightRegistration',
    
    components: {
      ServiceNav,
      Footer,
      UploadFilled,
      Trophy,
      Money,
      Lock,
      Document,
      Star,
      Connection,
      Check,
      Timer,
      CircleCheck,
      CreditCard,
      Select,
      Setting
    },
    
    setup() {
      // 服务选项
      const serviceOptions = [
        { id: 1, title: '电子软著10工', price: 599, time: '10个工作日' },
        { id: 2, title: '电子软著-3工', price: 999, time: '3个工作日' },
        { id: 3, title: '电子软著-1工', price: 1599, time: '1个工作日' },
        { id: 4, title: '纸质普件-包过', price: 1099, time: '15-20个工作日' },
        { id: 5, title: '纸质加急-包过', price: 1599, time: '7-10个工作日' }
      ];
      
      // 软著价值
      const copyrightValues = [
        { 
          title: '法律保护', 
          description: '运营安全稳定，品牌便捷传播',
          icon: 'CircleCheck'
        },
        { 
          title: '无形资产', 
          description: '提升企业价值，增加无形资产',
          icon: 'Money'
        },
        { 
          title: '上架必备', 
          description: '应用市场上架的基本要求',
          icon: 'Document'
        },
        { 
          title: '税收优惠', 
          description: '享受国家软件企业税收优惠政策',
          icon: 'CreditCard'
        }
      ];
      
      // 核心优势
      const coreAdvantages = [
        { 
          title: '电子证书', 
          description: '同时申请App电子版权认证证书',
          icon: 'Document'
        },
        { 
          title: '用户口碑', 
          description: '累计服务用户3万+',
          icon: 'Star'
        },
        { 
          title: '保证申请', 
          description: '申请不通过，全额退款',
          icon: 'Check'
        },
        { 
          title: 'App上架', 
          description: '申请软著符合各市场规定',
          icon: 'Connection'
        }
      ];
      
      // 申请流程
      const applicationProcess = [
        { title: '线上下单', description: '选择服务类型' },
        { title: '提交资料', description: '上传必要申请材料' },
        { title: '资料审核', description: '专业人员核对信息' },
        { title: '软著申请', description: '向版权局提交申请' },
        { title: '下发证书', description: '获得软著证书' }
      ];
      
      // 企业申请材料
      const enterpriseMaterials = [
        '营业执照副本原件照片',
        '授权书',
        '申请人身份证，正反面',
        '手机号码',
        '邮箱',
        '软著申请表'
      ];
      
      // 个人申请材料
      const personalMaterials = [
        '申请人手持身份证照片',
        '申请人身份证，正反面',
        '手机号码',
        '邮箱',
        '软著申请表'
      ];
      
      // 常见问题
      const faqs = [
        {
          question: '软件著作权的保护周期是多久？',
          answer: '自然人的软件著作权，保护期为自然人终生及其死亡后50年；软件是合作开发的，截止于最后死亡的自然人死亡后第50年的12月31日。法人或者其他组织的软件著作权，保护期为软件首次发表之后50年，但软件自开发完成之日起50年内未发表的，不再保护。'
        },
        {
          question: '软件著作权登记申请可以加急吗？',
          answer: '可以加急。平台与中国版权保护中心负责加急审核的部门签订合作协议，可以申请加急业务。'
        },
        {
          question: 'App软著是安卓(Android)与苹果(IOS)通用吗？是否可以同时选择两个系统申请同一软著？',
          answer: '软著是一对一的，安卓一个，苹果一个。不能同时申请两个系统软著。'
        },
        {
          question: '软著申请时间是如何计算的？',
          answer: '收到邮寄资料，第二天开始算起。15:30以后收到件要第二天提交，第三天算工作日。是工作日不是自然日。'
        },
        {
          question: '软件著作权证书如何查询真伪？',
          answer: '查询软著证书：https://register.ccopyright.com.cn/publicInquiry.html?type=softList'
        },
        {
          question: '可以申请360上架时的App电子版权认证证书吗？',
          answer: '可以申请，费用200元一个。要求先申请完软著后才可以申请App电子版权认证。'
        }
      ];
      
      // 表单数据
      const form = reactive({
        applicantType: 'enterprise',
        softwareName: '',
        contactName: '',
        contactPhone: '',
        email: '',
        timeLimit: '',
        files: []
      });
      
      // 处理立即登记
      const handleRegister = () => {
        document.getElementById('application-form').scrollIntoView({ 
          behavior: 'smooth' 
        });
      };
      
      // 了解详情
      const handleLearnMore = () => {
        document.querySelector('.value-section').scrollIntoView({ 
          behavior: 'smooth' 
        });
      };
      
      // 选择服务选项
      const selectOption = (option) => {
        form.timeLimit = option.id;
        handleRegister();
      };
      
      // 文件上传相关方法
      const handlePreview = (file) => {
        console.log(file);
      };
      
      const handleRemove = (file, fileList) => {
        console.log(file, fileList);
      };
      
      const beforeRemove = (file) => {
        return ElMessageBox.confirm(
          `确定移除 ${file.name} 吗？`,
          '提示',
          {
            type: 'warning',
          }
        );
      };
      
      const handleExceed = (files, fileList) => {
        ElMessage.warning(
          `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
        );
      };
      
      // 提交申请
      const submitApplication = () => {
        if (!form.softwareName) {
          ElMessage.warning('请输入软件名称');
          return;
        }
        
        if (!form.contactName) {
          ElMessage.warning('请输入联系人姓名');
          return;
        }
        
        if (!form.contactPhone) {
          ElMessage.warning('请输入联系电话');
          return;
        }
        
        if (!form.email) {
          ElMessage.warning('请输入电子邮箱');
          return;
        }
        
        if (!form.timeLimit) {
          ElMessage.warning('请选择申请时限');
          return;
        }
        
        ElMessage.success('申请提交成功，客服人员将尽快与您联系');
      };
      
      // 重置表单
      const resetForm = () => {
        Object.keys(form).forEach(key => {
          form[key] = '';
        });
        form.applicantType = 'enterprise';
        form.files = [];
      };
      
      return {
        serviceOptions,
        copyrightValues,
        coreAdvantages,
        applicationProcess,
        enterpriseMaterials,
        personalMaterials,
        faqs,
        form,
        handleRegister,
        handleLearnMore,
        selectOption,
        handlePreview,
        handleRemove,
        beforeRemove,
        handleExceed,
        submitApplication,
        resetForm
      };
    }
  });
  </script>
  
  <style lang="scss" scoped>
  .copyright-registration {
    position: relative;
    width: 100%;
  }
  
  .container {
    max-width: $container-width;
    margin: 0 auto;
    padding: 0 $spacing-base;
  }
  
  .section-title {
    text-align: center;
    font-size: $font-size-extra-large;
    color: $text-primary;
    margin-bottom: $spacing-large;
    
    .subtitle {
      font-size: $font-size-medium;
      color: $text-secondary;
      font-weight: normal;
      margin-left: $spacing-small;
    }
  }
  
  .banner {
    height: 400px;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/images/copyright-bg.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    margin-top: 0px;
    align-items: center;
    
    &-content {
      text-align: center;
      color: #fff;
    }
    
    &-title {
      font-size: 42px;
      margin-bottom: $spacing-base;
    }
    
    &-desc {
      font-size: 20px;
      margin-bottom: $spacing-extra-large;
      opacity: 0.9;
    }
    
    &-actions {
      display: flex;
      justify-content: center;
      gap: $spacing-large;
      
      .btn-details {
        background-color: transparent;
        border-color: #fff;
        color: #fff;
        
        &:hover {
          background-color: rgba(255,255,255,0.1);
        }
      }
    }
  }
  
  .service-options {
    padding: $spacing-extra-large 0;
    background-color: $background-color-white;
    
    .options-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: $spacing-base;
      
      @media (max-width: 992px) {
        grid-template-columns: repeat(3, 1fr);
      }
      
      @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
      }
      
      @media (max-width: 576px) {
        grid-template-columns: 1fr;
      }
    }
    
    .option-card {
      padding: $spacing-large;
      border: 1px solid $border-color-light;
      border-radius: $border-radius-base;
      text-align: center;
      transition: $transition-base;
      
      &:hover {
        box-shadow: $box-shadow-base;
        transform: translateY(-5px);
      }
      
      .option-title {
        font-size: $font-size-large;
        margin-bottom: $spacing-small;
      }
      
      .option-price {
        font-size: 24px;
        color: $primary-color;
        font-weight: bold;
        margin-bottom: $spacing-small;
      }
      
      .option-time {
        color: $text-secondary;
        margin-bottom: $spacing-large;
      }
    }
  }
  
  .value-section, .advantages {
    padding: $spacing-extra-large 0;
    
    &:nth-child(odd) {
      background-color: $background-color-base;
    }
    
    .value-grid, .advantages-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: $spacing-large;
      
      @media (max-width: 992px) {
        grid-template-columns: repeat(2, 1fr);
      }
      
      @media (max-width: 576px) {
        grid-template-columns: 1fr;
      }
    }
    
    .value-item, .advantage-item {
      text-align: center;
      
      .value-icon, .advantage-icon {
        color: $primary-color;
        margin-bottom: $spacing-base;
      }
      
      .value-title, .advantage-title {
        font-size: $font-size-large;
        margin-bottom: $spacing-small;
      }
      
      .value-desc, .advantage-desc {
        color: $text-regular;
      }
    }
  }
  
  .process {
    padding: $spacing-extra-large 0;
    background-color: $background-color-white;
    
    .el-steps {
      max-width: 800px;
      margin: 0 auto;
    }
  }
  
  .materials {
    padding: $spacing-extra-large 0;
    background-color: $background-color-base;
    
    .el-tabs {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .material-list {
      padding-left: $spacing-large;
      
      li {
        margin-bottom: $spacing-small;
        color: $text-regular;
      }
    }
  }
  
  .application-form {
    padding: $spacing-extra-large 0;
    background-color: $background-color-white;
    
    .registration-form {
      max-width: 600px;
      margin: 0 auto;
    }
  }
  
  .faq-section {
    padding: $spacing-extra-large 0;
    background-color: $background-color-base;
    
    .el-collapse {
      max-width: 800px;
      margin: 0 auto;
    }
  }
  
  // 响应式调整
  @media (max-width: 768px) {
    .banner {
      height: 300px;
      
      &-title {
        font-size: 32px;
      }
      
      &-desc {
        font-size: $font-size-medium;
      }
      
      &-actions {
        flex-direction: column;
        align-items: center;
        gap: $spacing-base;
      }
    }
    
    .section-title {
      font-size: $font-size-large;
    }
  }
  </style> 
   
   